<template>
	<view class="buycarContainer">
		<!-- 弹出二维码页面 -->
		<view  v-if="cover" class="cover">
			<image  class="coverImg" src="../../static/images/getCode.png" mode=""></image>
			<view class="payBtn">
				<button type="default" class="successPay" @click="payed">我已支付</button>
				<button type="default" class="cancelPay" @click="changeCover">取消支付</button>
			</view>
		</view>
		<!-- 正常购物车页面 -->
		<view  v-else class="topBuygoodsWrap">
			<view class="topBuygoods" v-for="(cart,index) in cartList" :key="cart.goodsId">
				<image class="checkBox"  @click="changeCheck(cart)" :src="cart.isChecked?imgChecked:imgNotCheck"  mode=""></image>
				<image class="buyGoodsImg" :src="cart.imgUrl" mode=""></image>
				<view class="rightBox">
					<text class="goodsTitle">{{cart.goodsName}}</text>
					<view class="goodsPrice">
						<text class="priceText">￥{{cart.originalPrice}}</text>
						<view class="numChange">
							<text class="decrease" @click="changeNum(cart,-1,index)">-</text>
							<input class="numIpt" type="text"  disabled="true" :value="cart.goodsNum" />
							<text class="add" @click="changeNum(cart,1,index)">+</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部容器 --> 
		<view class="bottomBuyWrap">
			<view class="leftCheckAndPrice">
				<image class="leftCheckImg"  @click="changeAllCheck"
					:src="isAllcheck?imgChecked:imgNotCheck"	 mode=""></image>
				<text class="allCheckText">全选</text>
				<text class="checkNum">选中{{checkedNum}}</text>
				<text class="sumPriceText">总金额￥{{allMoney}}</text>
			</view>
			<button class="rightNowBuy" type="default" @click="toCenter">立即购买</button>
		</view>
		
		
		
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				userInfo:'',//用户登录信息
				cover:false, //二维码遮罩层
				imgChecked:'../../static/icon/check.png',
				imgNotCheck:'../../static/icon/noCheck.png',
				
			}
		},
		onShow(){
			this.userInfo =  wx.getStorageSync('userInfo_key')
			// console.log('用户信息',this.userInfo);
			
			
			//如果用户没登录让购物车为空
			if(this.userInfo){
				if(!this.cartList.length){
					// this.$store.dispatch('getCartList')
				}
			}
		},
		computed:{
			...mapState({
				cartList:state=>state.buycar.cartList,
			}),
			//计算选中数量
			checkedNum(){
				return this.cartList.reduce((pre,item)=>{
					if(item.isChecked){
						pre +=item.goodsNum
					}
					return pre
				},0)
			},
			//计算总价
			allMoney(){
				return this.cartList.reduce((pre,item)=>{
					if(item.isChecked){
						pre += item.goodsNum * item.originalPrice
					}
					return pre
				},0)
			},
			//方法1.是否全选
			// isAllcheck:{
			// 	get(){
			// 		return   this.cartList.every(item=>item.isChecked)
			// 	},
			// 	set(newValue){
			// 		return	this.cartList.forEach(item=>item.isChecked = newValue)
			// 	}
			// }
			//方法二
			isAllcheck(){
				return  this.cartList.every(item=>item.isChecked)
			}
			
		},
		methods:{
			//单个选中状态修改
		  	changeCheck(cart){
			  	cart.isChecked = !cart.isChecked
			},
			//对应方法1.修改全选状态
			//  changeAllCheck(){
			//    this.isAllcheck = !this.isAllcheck
			// },
			//对应方法2，修改全选状态
			changeAllCheck(){
				let newValue = !this.isAllcheck
				this.cartList.forEach(item=>item.isChecked = newValue)
			},
			
			
			//处理加一个或者减一个,以及删除购物车商品
			 changeNum(cart,num,index){
				cart.goodsNum += num
				if(cart.goodsNum<1){
					wx.showModal({
					  title: '提示',
					  content: `你确定要删除${cart.goodsName}吗？`,
					  success:(res)=>{
					    if (res.confirm) {
					      this.cartList.splice(index,1)
					    } else if (res.cancel) {
							cart.goodsNum = 1
					    }
					  }
					})
				}
			},
			
			//点击'立即购买'，跳转个人中心
			toCenter(){
				if(this.userInfo){
					//这里弹出二维码
					this.cover = true
					wx.hideTabBar()
				}else{
					wx.showToast({
					  title: '请登录',
					  icon: 'loading',
					  duration: 1000
					})
					setTimeout(()=>{
						wx.reLaunch({
							url:'/pages/center/center'
						})
					},1000)
				}
				
			},
			
			//点击'取消支付',干掉微信支付遮罩
			changeCover(){
				this.cover=!this.cover
				wx.showTabBar()
			},
			//点击'我已支付'处理
			payed(){
				let num = 3
				let	timerId = setInterval(()=>{
					if(num <= 1){
						clearInterval(timerId)
						wx.reLaunch({
							url:'/pages/index/index'
						})
						wx.showTabBar()
					}
					wx.showToast({
					  title: `成功${num}秒后跳转`,
					  icon: 'success',
					  // duration: 1000
					})
					num--
				},1000)
			}
			
			
		}
	
	}
</script>

<style lang="stylus">
	.buycarContainer
		height 100%
		background-color #F4F4F4
		.cover
			position  relative
			width 100%
			height 100%
			position fixed
			z-index 9999
			background-color #FFFFFF
			display flex
			flex-direction column
			justify-content center
			align-items center
			.coverImg
				width 426rpx
				height 426rpx
				margin-top 50rpx
				display block
			.payBtn
				display flex
				flex-direction row
				justify-content space-around
				align-items center
				.successPay
					margin-right 50rpx
		.topBuygoodsWrap
			width 100%
			padding-bottom 100rpx
			.topBuygoods
				width 100%
				height 200rpx
				display flex
				justify-content space-around
				align-items center
				.checkBox
					width 32rpx
					height 32rpx
				.buyGoodsImg
					width 160rpx
					height 160rpx
					border-radius 10rpx
				.rightBox
					width 446rpx
					height 192rpx
					display flex
					flex-direction column
					justify-content space-between
					.goodsTitle
						font-size 28rpx
						color #232326
					.goodsPrice
						height 44rpx
						display flex
						justify-content space-between
						align-items center
						.priceText
							font-size 32rpx
						.numChange
							width 176rpx
							height 44rpx
							display flex
							justify-content space-around
							.decrease
								width 40rpx
								height 40rpx
								color #9A9D9F
							.numIpt
								width 80rpx
								height 40rpx
								line-height 40rpx
								box-sizing border-box
								font-size 28rpx
								text-align center
								background-color #F0F0F0
							.add
								width 40rpx
								height 40rpx
								color #9A9D9F
		.bottomBuyWrap	
			width 100%
			height 100rpx
			box-sizing border-box
			border-top 1rpx solid #F4F4F4
			background-color #fff
			position fixed
			bottom 0
			display flex
			justify-content space-between
			align-items center
			.leftCheckAndPrice	
				width calc(100vw - 174rpx)
				height 44rpx
				box-sizing border-box
				padding-left 20rpx
				display flex
				justify-content flex-start
				.leftCheckImg   
					width 32rpx
					height 32rpx
					margin-top 6rpx
					margin-right 20rpx
				.allCheckText	
					width 50rpx
					height 44rpx
					line-height 44rpx
					text-align center
					font-size 24rpx
					margin-right 20rpx
				.checkNum
					width 80rpx
					height 44rpx
					line-height 44rpx
					font-size 24rpx
					margin-right 20rpx
				.sumPriceText
					height 44rpx
					line-height 44rpx
					text-align center
					font-size 24rpx
			.rightNowBuy	
				width 220rpx
				height 60rpx
				line-height  60rpx
				text-align center
				border-radius 50rpx
				background-color #000
				color #fff
				font-size 32rpx
				margin-right 20rpx
				
				
				
								
</style>
